<template>
  <div class="contract-editor-container">
    <!-- 工具栏 -->
    <el-card class="mb-4">
      <div class="flex justify-between items-center">
        <div class="flex gap-2">
          <el-button type="primary" @click="saveContract">
            保存合同
          </el-button>
          <el-button @click="previewContract">
            预览
          </el-button>
        </div>
        <div>
        </div>
      </div>
    </el-card>
    
    <!-- 合同编辑区域 -->
    <el-card >
      <div class="contract-content">
        <!-- 合同标题 -->
        <div class="text-center mb-8">
          <h1 class="text-2xl font-bold">劳务承包协议</h1>
          <p class="text-left">合同编号: {{ contract.contractNumber }}</p>
        </div>
        
        <!-- 合同双方信息 -->
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">一、合同双方</h2>
          
          <div class="grid grid-cols-2 gap-6">
            <div>
              <p class="font-medium">甲方：苏州华雨建设科技有限公司</p>
            </div>
            
            <div>
              <p class="font-medium">乙方：<span class="edit" >
                {{ contract.partyB }}
              </span>   身份证号码：<span class="edit" :contenteditable="isEdit('idcard')" 
                 @blur="onChange('idcard', $event.target)">
                {{ contract.idcard }}
              </span></p>
            </div>
          </div>
        </div>
        
        <!-- 服务内容 -->
        <div class="mb-6">
          <p>　　依据《中华人民共和国合同法》及其它有关法律法规，国家及工程所在地标准和规范的要求，遵循诚实守信的原则，甲乙双方就
            <span class="edit" :contenteditable="isEdit('project')" 
                 @blur="onChange('project', $event.target)">
                {{ contract.project }}
              </span>工程施工事项，订立本协议。</p>
        </div>
       
        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">一、工程概况和内容</h2>
          <p>　　1、工程名称：<span class="edit" :contenteditable="isEdit('project')" 
                 @blur="onChange('project', $event.target)">
                {{ contract.project }}
              </span></p>
          <p>　　2、工程承包范围：<span class="edit" :contenteditable="isEdit('scop')" 
                 @blur="onChange('scop', $event.target)">
                {{ contract.scop }}
              </span>及其他需要施工部分</p>
          <p>　　3、工程地点：<span class="edit" :contenteditable="isEdit('address')" 
                 @blur="onChange('address', $event.target)">
                {{ contract.address }}
              </span></p>
          <p>　　4、承包方式：包工及部分材料（辅料、机具设备乙方自备）</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">二、合同（暂估）价款</h2>
          <p>　　金额：人民币<span class="edit" >
                {{ contract.price }}
              </span>元（大写： <span class="edit" :contenteditable="isEdit('china_price')" 
                 @blur="onChange('china_price', $event.target)">
                {{ contract.china_price }}
              </span> ）。该金额为暂估金额，具体结算金额以固定单价*实际完成合格工程量。（结算单价见劳务合同附件清单报价）</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">三、工期</h2>
          <p>　　1、开工日期：本承包工程定于<span class="edit" :contenteditable="isEdit('start_date')" 
                 @blur="onChange('start_date', $event.target)">
                {{ contract.start_date }}
              </span>开工；</p>
          <p>　　竣工日期：本承包工程定于<span class="edit" :contenteditable="isEdit('end_date')" 
                 @blur="onChange('end_date', $event.target)">
                {{ contract.end_date }}
              </span>竣工；</p>
          <p>　　协议总工期为：<span class="edit" :contenteditable="isEdit('period')" 
                 @blur="onChange('period', $event.target)">
                {{ contract.period }}
              </span>天（其中乙方<承包人>期间主要施工时间段：</p>
          <p>　　<span class="edit" :contenteditable="isEdit('time_period')" 
                 @blur="onChange('time_period', $event.target)">
                {{ contract.time_period }}
              </span></p>
          <p>　　本承包工程工期需满足甲方项目总工期的需要，若根据实际情况需调整本承包工程的工期，由甲方向乙方发送书面文件，乙方若有异议应在收到后八小时内书面提出，若未提出，视为已同意新的工期进度安排。</p>
          <p>　　2、工期要求：工程不能按合同工期竣工或超出发包方、甲方同意顺延的工期竣工，乙方承担下列违约责任：</p>
          <p>　　（1）总工期逾期：若因乙方原因造成逾期竣工，每逾期一天按合同总金额的
            <span class="edit" :contenteditable="isEdit('overdue_penalty')" 
                 @blur="onChange('overdue_penalty', $event.target)">
                {{ contract.overdue_penalty }}
              </span>承担逾期违约金，并承担包括甲方因此遭受到发包人给予的处罚；</p>
          <p>　　（2）节点工程逾期：若节点工期发生延误，每逾期一天按该节点工期内的工程量造价的
            <span class="edit" :contenteditable="isEdit('node_overdue_penalty')" 
                 @blur="onChange('node_overdue_penalty', $event.target)">
                {{ contract.node_overdue_penalty }}
              </span>支付违约金，且甲方按各节点进行考核，可累计扣罚。若通过积极施工总工期最终能按期完成，对原节点的扣罚款项甲方可予以返还。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">四、施工质量标准：</h2>
          <p>　　本合同施工作业质量严格执行国家、地方标准、规范，并应满足业主、监理、施工单位及甲方要求，由前述各方验收通过方可合格。</p>
          <p>　　1、工程质量必须达到本合同所约定的工程质量标准，质量的评定标准按照甲方与业主/土建总包/其他管理方（以下统称为发包人）所签订的施工合同相应质量条款履行。乙方必须严格按国家、施工地当地政府部门有关标准、规范和设计要求以及甲方的指令施工，因乙方原因使工程质量达不到约定的质量标准，乙方应立即无条件返修整改，一切返修费用由乙方承担并赔偿由此给甲方造成的损失；如获得优质工程的项目按总包合同约定给予相应的奖励。</p>
          <p>　　2、乙方在开工前，必须编制施工工艺、施工进度报甲方审查、批准。工程的检查、交接验收等程序条件必须满足总包合同或甲方的质量标准和质量要求，乙方必须自检，并提供自检依据，自检后以书面形式通知甲方并允许及接受甲方进入现场进行工程交接验收、检查。乙方应就承包工程向甲方承担甲方在与发包人所签订施工合同中所应承担的一切义务。</p>
          <p>　　3、已完工工程的成品保护： 施工未经验收或未正式交付的工程，由乙方按甲方或发包人要求负责保护，如果出现损坏，必须无条件立即修复。</p>
          <p>　　4、质量保修：工程竣工验收交付使用后，乙方应按国家有关规定对工程出现的缺陷进行保修，在保修期内出现质量问题，乙方必须在   8  小时内做出响应， 24 小时内派人提供免费维修。逾期维修或经通知后不进行维修，甲方有权在应付款项中扣除相应的维修款，并有权要求乙方承担与维修款等额的违约金。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">五、甲乙双方的项目负责代表</h2>
          <p>　　1、甲方委派代表为，姓名：
            <span class="edit" :contenteditable="isEdit('a_name')" 
                 @blur="onChange('a_name', $event.target)">
                {{ contract.a_name }}
              </span>职务：
              <span class="edit" :contenteditable="isEdit('a_position')" 
                 @blur="onChange('a_position', $event.target)">
                {{ contract.a_position }}
              </span>;联系方式：
              <span class="edit" :contenteditable="isEdit('a_mobile')" 
                 @blur="onChange('a_mobile', $event.target)">
                {{ contract.a_mobile }}
              </span></p>
          <p>　　甲方综合管理部负责人为，姓名：<span class="edit" :contenteditable="isEdit('a_management_name')" 
                 @blur="onChange('a_management_name', $event.target)">
                {{ contract.a_management_name }}
              </span>综合管理部负责人联系方式： <span class="edit" :contenteditable="isEdit('a_management_mobile')" 
                 @blur="onChange('a_management_mobile', $event.target)">
                {{ contract.a_management_mobile }}
              </span></p>
          <p>　　乙方委派代表为，姓名：<span class="edit" :contenteditable="isEdit('b_name')" 
                 @blur="onChange('b_name', $event.target)">
                {{ contract.b_name }}
              </span>;职务：<span class="edit" :contenteditable="isEdit('b_position')" 
                 @blur="onChange('b_position', $event.target)">
                {{ contract.b_position }}
              </span>;联系方式：<span class="edit" :contenteditable="isEdit('b_mobile')" 
                 @blur="onChange('b_mobile', $event.target)">
                {{ contract.b_mobile }}
              </span></p>
          <p>　　上述各方项目负责代表人根据各方授予之职权按本合同约定行使各自的权利，履行各自的义务和职责。乙方需在开工前3日内，将委派代表的授权书提供一份给甲方备案，若未按时提交授权委托书备案，视为乙方代表的一切行为均已获得其本单位的授权。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">六、材料使用和利用</h2>
          <p>　　（1）乙方必须提前一周将材料名称、品牌、规格、数量计划交给甲方审核，材料到场后由乙方按甲方要求领用保管，由于保管和使用不当产生的损失由乙方承担。</p>
          <p>　　（2）乙方必须精打细算，节约用料，基层材料在不影响质量效果的情况下使用，零星材料尽量利用，如果发现材料浪费现象，每发现一次则处以浪费材料部分双倍的经济处罚。</p>
          <p>　　（3）乙方领用发包人供应材料的，应向甲方提供材料领用单，如发包人发现本合同所涉工程部分存在超领材料的，甲方有权要求乙方返还超领部分的材料或直接在乙方剩余工程款中予以扣除相应材料款；如工程完工后，发包人发现本合同所涉工程部分存在超领材料并在甲方工程款直接扣除超领材料金额的，甲方亦有权向乙方在未结付的款项中予以扣除相应金额，不足扣除的部分，乙方应在收到甲方通知后7日内予以返还。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">七、工程量的确认</h2>
          <p>　　乙方应于每月   25  日向甲方提交已完工作量的报告，经甲方相关代表初步审核，工程竣工后最终以实际完成合格的工作量需要项目负责人与综合管理部负责人双签字予以确认。对于乙方上报工作量超出实际工作量时，一经查实，甲方有权对乙方作出虚增部分一倍的经济处罚，对由于乙方原因造成工程返工的工程量甲方不予认可。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">八、付款       方式支付</h2>
          <p>　　1、乙方工人应按照项目部要求每天上下班现场有效工作打卡（4次）；每月底25日经甲乙双方委派代表签字确认后报公司综合管理部，次月30日暂定安每天每人
          <span class="edit" :contenteditable="isEdit('daily_wage')" 
                 @blur="onChange('daily_wage', $event.target)">
                {{ contract.daily_wage }}
              </span>元支付工资。 待项目总体完工，业主验收合格后；
              <span class="edit" :contenteditable="isEdit('balance')" 
                 @blur="onChange('balance', $event.target)">
                {{ contract.balance }}
              </span>支付余款。</p>
          <p>　　2、乙方每月凭甲方确认的工程量报告向甲方申请工程款，甲方按不高于审定价的   \ ％ ，经甲方综合管理部及财务部批准后支付。乙方承担总额   4%  的劳务税（由甲方代扣），4%  以上的税金部分由甲方承担。</p>
          <p>　　3、如本项目经甲方确定为重点或精品工程，且乙方在历次检查中质量都能达到甲方项目部要求，甲方在月度付款、项目结算时给予适当提高付款比例的优惠。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">九、安全文明施工</h2>
          <p>　　1、乙方必须对全体施工作业人员进行安全文明施工教育</p>
          <p>　　（1）乙方应当建立健全建筑安全生产教育培训制度，未经安全生产教育培训或者考核不合格的职工，不得上岗作业。</p>
          <p>　　（2）乙方必须为其施工人员提供符合安全、卫生标准的生产环境、作业条件、机械设备和安全防护用具等。在乙方施工范围内，因安全防护、文明措施等发生的费用，由乙方承担。</p>
          <p>　　（3）安全用电，严格遵守用电规范，所有用电设备必须从开关箱取电。</p>
          <p>　　（4）凡需电焊、气割的动火作业，必须申办好动火证，配备灭火器，有监护人，清理周围可燃物后方可施工。</p>
          <p>　　（5）在悬空交叉作业时，离地超过2米者，上岗人员应戴安全带，工地施工人员应戴安全帽，帽带扣紧。</p>
          <p>　　（6）对施工现场搭设的脚手架必须经验收合格后方能使用。</p>
          <p>　　（7）特殊工种必须持证上岗、严格按规范操作。</p>
          <p>　　2、乙方必须认真贯彻安全第一、预防为主的方针，确保施工过程中人身和设备安全。一旦发生安全事故，应立即报告项目部、维护好现场、采取应急措施，根据事故、事件，查明原因，分清责任并承担相应的损失。如果属乙方违规操作，一切责任由乙方承担。</p>
          <p>　　3、乙方必须遵守甲方（包括业主、监理及物业管理公司等）各种“奖罚制度”。</p>
          <p>　　4、乙方在工地严禁吸烟，上班须带胸卡，穿工作服。</p>
          <p>　　5、乙方对施工质量、安全及其人员管理负责，施工过程中发现质量、安全、工伤事故，由乙方承担全部责任，若因此造成甲方损失或使得甲方遭受第三方索赔的，甲方均有权向乙方追偿，并有权从应付乙方的结算款中直接优先扣除。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">十、竣工验收及结算</h2>
          <p>　　1、工程具备竣工验收条件时，由甲方通知发包人进行验收，按发包人要求的验收期限及程序组织验收，乙方予以配合，凡竣工验收未能通过且属乙方原因的，乙方负责立即修复，并承担全部费用。乙方的竣工日期以甲方向乙方出具验收合格证明上注明的日期为准。如甲方未出具验收合格证明的，以发包人向甲方出具的竣工验收合格记录或类似的书面资料上注明的竣工日期为准。</p>
          <p>　　2、工程总体竣工验收通过，乙方即可进行工程竣工决算；经甲方综合管理部复核确认后，在当年年终时付至结算价的
            <span class="edit" :contenteditable="isEdit('settlement_first')" 
                 @blur="onChange('settlement_first', $event.target)">
                {{ contract.settlement_first }}
              </span>，留
              <span class="edit" :contenteditable="isEdit('settlement_after')" 
                 @blur="onChange('settlement_after', $event.target)">
                {{ contract.settlement_after }}
              </span>第二年年终结清。甲方项目经理或项目部出具的结算单或类似的结算资料不作为甲方付款的依据，以甲方综合管理部最终复核确认为准。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">十一、争议及其解决方式</h2>
          <p>　　双方在履行合同时发生争议后，可以和解或协商解决，但双方应该继续履行协议，保持施工的连续性。发生争议期间，乙方不得采取擅自停工或采取其他方式拖延施工、不施工，如因此造成的损失及不利后果则由乙方全部承担。</p>
          <p>　　若双方对争议无法达成共识时，双方同意按照下列（<span class="edit" :contenteditable="isEdit('controversy')" 
                 @blur="onChange('controversy', $event.target)">
                {{ contract.controversy }}
              </span>）方式解决争议：</p>
          <p>　　A提交苏州仲裁委员会裁决解决，并适用该仲裁委员会的仲裁规则，一裁终局</p>
          <p>　　B提交甲方所在地有管辖权的人民法院诉讼解决。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">十二、工人工资发放的保证条款</h2>
          <p>　　1、乙方必须自行加强考勤管理，并严格执行甲方要求的工人考勤制度及工人工资发放管理制度，严禁虚假考勤，一经发现按虚报工作量情形处理。（每月工人考勤表包括工时数量、结算单价，由工人本人、乙方负责人、甲方代表签字后报甲方存档。）</p>
          <p>　　2、甲方有权委托劳务公司将乙方应发放的工人工资主要部分直接发放给工人，其余部分乙方必须保证按有关法律法规的规定定期足额发放到每一工人手中；</p>
          <p>　　3、如乙方未能及时发放工人工资，导致工人因工资问题闹事或向有关部门投诉的，甲方有权从剩余工程款中直接支付，同时乙方仍应承担如下违约责任：</p>
          <p>　　（1）向甲方支付相当于垫付工资等额的违约金；</p>
          <p>　　（2）如甲方因此受到发包人索赔或被行政部门进行行政处罚的，乙方需承担因此给甲方造成的经济损失；</p>
          <p>　　（3）如构成刑事责任的，提交相关部门处理。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">十三、违约及协议解除</h2>
          <p>　　1、乙方有下列违约情况之一时，甲方可以解除协议：</p>
          <p>　　（1）未经甲方书面允许，乙方擅自与发包人或监理工程师发生直接工作联系的（包括直接发函、直接接受发包人或监理的指令、加微信、互留联系方式等）。</p>
          <p>　　（2）因乙方原因逾期竣工超过7日的；</p>
          <p>　　（3）工程质量达不到约定的质量标准并经返工后仍不符合质量要求的；</p>
          <p>　　（4）乙方不履行合同义务或不按合同约定履行义务的其他情况,经甲方书面联系后仍无改善的；</p>
          <p>　　（5）出现工人因工资问题闹事的。</p>
          <p>　　2、乙方应就承包工程向甲方承担甲方在与发包人签订合同中所应承担的一切义务。因乙方的原因导致工程发包人对甲方进行违约处罚，乙方需承担由此给甲方造成的损失。</p>
          <p>　　3、乙方应承担的赔偿金额及违约金甲方可在应付乙方的款项中抵扣，不足部分另行追偿。</p>
          <p>　　4、因乙方原因导致合同解除的，乙方应向甲方支付合同价款30%的违约金。</p>
          <p>　　5、因乙方原因导致合同解除的，乙方人员及施工设备必须于接到甲方解除协议通知后3日内无条件退场，并向甲方或甲方指定管理人移交工程，逾期未移交的，每逾期一日，乙方向甲方支付违约金10000.00元。乙方已完成的合格部分的工程量，参照本合同约定的价款方式予以结算。</p>
          <p>　　（5）出现工人因工资问题闹事的。</p>
        </div>

        <div class="mb-6">
          <p>　　十四、其他未尽事宜由双方另行签订补充协议确定。本合同自甲盖章及甲方委派代表及甲方综合管理部负责人签字，且经乙方签字之后生效。本合同如需要修改或增加，需经甲乙双方盖章且经前述相关人员签字确认后生效，否则对合同各方均不具有约束力。本协议一式  贰  份，各执  贰壹  份，均具有同等法律效力。</p>
        </div>

        <div class="mb-6">
          <h2 class="text-xl font-semibold mb-4 border-b pb-2">十五、其他约定：</h2>
          <p>　　1.乙方承包人每周现场打卡不少于3次，缺少一次捐款1000.00元；</p>
          <p>　　2.乙方承包人现场负责人电话、信息、微信超过5个小时未回复，缺少一次捐款500.00元；</p>
          <p>　　3.现场增加工程量或设计变更等多出来的工程量乙方需要积极配合完成后，费用参照物已有价格或双方协商</p>
          <p>　　4.结算书内容必须以具体计量单位工程量，不得出现项、天、含糊不清计量单位结算。</p>
        </div>

        <div class="mb-6"><p>十六、甲方设投诉热线电话：0512-62657511</p></div>
        <div class="mb-6"><p>合同附件：1.具体报价清单，2.《廉洁承诺书》3.乙方身份证正反面复印件</p></div>
        
        

        <el-row>
              <el-col :span="12">
                  <p>　　甲方（盖章）：</p>
                  <p>　　甲方现场负责人：</p>
                  <p>　　乙方（签字）：</p>
              </el-col>
              <el-col :span="12">
                  <p>　　乙方（盖章）：</p>
                  <p>　　甲方综合管理部负责：</p>
                  <p>　　签订日期:</p>
              </el-col>
          </el-row>
        <!-- ------------------------------------------------------------ -->
      </div>
    </el-card>
    
    <!-- 预览弹窗 -->
    <el-dialog v-model="previewVisible" title="合同预览" width="80%">
      <div class="contract-preview" >
        <!-- 预览内容与编辑区域相同，但所有内容都不可编辑 -->
        <div ref="pdfContent" v-html="previewHtml" class="contract-content" />
      </div>
      
      <template #footer>
        <el-button v-if="template.is_approved" type="primary" @click="exportToPdf">导出为PDF</el-button>
        <el-button @click="previewVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage, ElCard, ElButton, ElDialog } from 'element-plus';
import html2pdf from 'html2pdf.js';
import http from '../../../../util/request';
import func from '../../../../util/function';
const pdfContent = ref(null);
const id:any = ref(0)

// 初始化合同数据
const contract = ref<any>({
  project: 'DK20100414地块（苏州新闻大厦）25层小演播室装饰工程（苏州日报社智能融媒体中心）',
  partyB: '衡大海',
  idcard: '320826198911083010',
  scop:'电工',
  address:'江苏省苏州工业园区',
  price:'47000.00',
  china_price: '肆万柒仟元整',
  start_date: '2021 年  03 月 01 日',
  end_date: '2021 年  07月  30日',
  period: '120',
  time_period: '2021年 03月 10日至  2021 年 05月 00 日',
  overdue_penalty: '百分之五',
  node_overdue_penalty: '百分之五 ',
  a_name: '刘赟淼',
  a_position: '项目负责人',
  a_mobile: '13915686959',
  a_management_name: '刘赟淼',
  a_management_mobile: '13915686959',
  b_name: '衡大海',
  b_position: '班组长',
  b_mobile: '18625223500',
  daily_wage: '80~ 120.00',
  balance:'　　',
  settlement_first: '60%',
  settlement_after: '40%',
  controversy: 'B',
});

// 可编辑区域设置
const dialogVisible = ref(false);
const editableSections = ref<string[]>([
  'project',
  'partyB',
  'idcard',
  'scop',
  'address',
  'price',
  'china_price',
  'start_date',
  'end_date',
  'period',
  'time_period',
  'overdue_penalty',
  'node_overdue_penalty',
  'a_name',
  'a_position',
  'a_mobile',
  'a_management_name',
  'a_management_mobile',
  'b_name',
  'b_position',
  'b_mobile',
  'daily_wage',
  'balance',
  'settlement_first',
  'settlement_after',
  'controversy',
]);


// 状态管理
const template = ref({is_approved:false});
const isSaved = ref(false);
const previewVisible = ref(false);
const previewHtml = ref('');

// 判断区域是否可编辑
const isEdit = (section: string) => {
  return editableSections.value.includes(section);
};

// 处理内容变化
const onChange = (section:any, value: any) => {
  contract.value[section] = value.innerText;
  isSaved.value = false;
};

const getData = () => {
    http.post('/labor/template',{labor_contract_id:id.value,type:'template'}).then((response:any)=>{
      if(response.data.data){
        contract.value = response.data.data.content
        template.value = response.data.data
      }
      dialogVisible.value = true;
    })
}

const getContract = () => {
    http.get('/contract/' + id.value).then((response:any)=>{
      if(response.data.data){
        contract.value.partyB = response.data.data.b_name
        let priceChinese = func.numberToChinese(response.data.data.price)
        contract.value.price = '大写人民币' + priceChinese + '（¥ ' + response.data.data.price + ' 元）'
      }
      getData()
    })
}

// 保存合同
const saveContract = () => {
  // 模拟保存操作
  let request:any = null
  let content:string = JSON.stringify(contract.value)
    if(id.value){
        request = http.patch('/labor/template',{labor_contract_id:id.value,type:'template',content:content})
    }else{
        request = http.put('/labor/template',{labor_contract_id:id.value,type:'template',content:content})
    }
    request.then((response:any)=>{
      if(response.data.code == 200){
        isSaved.value = true;
        ElMessage.success('合同已保存');
        emit('onLaborTemplate');
      }
    })
};

const emit = defineEmits(['onLaborTemplate'])

// 预览合同
const previewContract = () => {
  // 生成预览HTML，将所有可编辑区域变为不可编辑
  const tempDiv = document.createElement('div');
  const contractContent = document.querySelector('.contract-content')?.cloneNode(true);
  
  if (contractContent) {
    tempDiv.appendChild(contractContent);
    const editableElements = tempDiv.querySelectorAll('.edit');
    editableElements.forEach(el => {
      (el as HTMLElement).contentEditable = 'false';
      el.removeAttribute('class');
    });
    previewHtml.value = tempDiv.innerHTML;
    previewVisible.value = true;
  }
};

const props = defineProps<{
    id:any,
}>()

watch(props,()=>{
    id.value = props.id
    getContract()
},{ immediate: true })

// 导出PDF的方法
const exportToPdf = () => {
  if (!pdfContent.value) return;

  // 配置选项
  const opt = {
    margin: 10,
    filename: '导出的文档.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  };

  // 生成PDF
  html2pdf().from(pdfContent.value).set(opt).save();
};
</script>

<style scoped>
.contract-editor-container {
  padding: 20px;
  height: calc(100vh - 25vh);overflow-y: scroll;
}

.contract-content {
  line-height: 1.8;
  font-size: 16px;
}

.edit {
  border-bottom: 1px dashed #edd32c;
  padding: 0 4px;
  min-width: 60px;
  display: inline-block;
}

.edit[contenteditable="true"] {
  background-color: #edd32c;
  cursor: text;
}

.edit[contenteditable="true"]:focus {
  outline: 1px solid #edd32c;
  border-radius: 2px;
}

.contract-preview {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}
</style>
